<div class="card mb-4">
    <h6 class="card-header position-sticky position-sticky-under-navbar">
        Module Content
        <a class="btn-link text-primary btn-sm float-right py-0" data-toggle="collapse" data-target="#ModuleBody"
            role="button" aria-expanded="true" aria-controls="ModuleBody">
            <span class="far fa-minus-square text-primary"></span> Show/Hide</a>
    </h6>
    <div id="ModuleBody" class="card-body collapse show">
        <div class="form-group">
            <label>Title</label>
            <input type="text" class="form-control" ng-model="$ctrl.module.title" ng-blur="$ctrl.gennerateName()"
                placeholder="Your module title here..." required>
        </div>
        <div class="row">
            <div class="col-10">
                <div class="form-group mb-0">
                    <label>System Name</label>
                    <input type="text" class="form-control" ng-model="$ctrl.module.name">
                    <small class="form-text text-muted">This system name is using within the template code.</small>
                </div>
            </div>
            <div class="col">

                <div class="form-group">
                    <label>Page Size</label>
                    <input type="number" class="form-control" ng-model="$ctrl.module.pageSize">
                </div>
            </div>
        </div>
        <div class="form-group">
            <trumbowyg options="{}" ng-model="$ctrl.module.description"></trumbowyg>
        </div>        
    </div>
</div>